<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="comm/common :: head('云宗慧联-短链管理信息')"></head>
<body>
<form class="layui-form" action="javascript:void(0)" method="POST" style="margin-top: 30px;">
    <div class="layui-form-item">
        <button class="layui-btn" data-method="reload" lay-submit lay-filter="reload">刷新表格</button>
        <button class="layui-btn" data-method="insert" lay-submit lay-filter="insert">新增短链</button>
        <button class="layui-btn" data-method="delete" lay-submit lay-filter="delete">删除短链</button>
    </div>
</form>

<table class="layui-hide" id="link-table-links" lay-filter="links"></table>

<span th:include="comm/common :: javascript"></span>
<script>
    layui.use(['table',"layer"], function () {

        var table = layui.table, $ = layui.jquery, form = layui.form,layer=layui.layer;
        var rowCache = null;

        table.render({
            id: "link-table-links",
            elem: '#link-table-links', url: basePath + '/links/select',
            page: true,
            limit: 10,
            cols: [
                [
                    {type: 'checkbox'}
                    , {field: 'id', width: 150, title: '短链编号'}
                    , {
                    field: 'shortLink', width: 300, title: '短链地址', templet: function (row) {
                        return basePath + "/" + row.shortLink;
                    }
                }
                    , {field: 'fullLink', width: 800, title: '长链地址'}
                    , {field: 'hashCode', width: 150, title: '长链哈希'}
                ]
            ],
            done: function (res, curr, count) {
                table.on('checkbox(links)', function (row) {
                    rowCache = row.checked ? row.data : null;
                });
            }
        });

        //监听提交
        form.on('submit(reload)', function (data) {
            var method = $(data.elem).data('method');
            search[method] ? search[method].call(this, 'link-table-links', data.field) : '';
            location.reload();
            return false;
        });

        //监听新增操作
        form.on('submit(insert)', function (data) {

            var method = $(data.elem).data('method');
            search[method] ? search[method].call(this, '新增短链信息功能', '/links/fullLink',
                {
                    column: [
                        {type: "input", lable: "长链地址", name: "fullLink", tips: "请输入长链地址", verify: "required|url"},
                    ],
                    hidden: 4,
                    button: {method: "append", filter: "append", text: "立即新增"},

                    //表单创建前对数据的操作--一般用于组装数据
                    done: function () {
                    },

                    //表单提交前对数据的操作--一般用于组装数据
                    submit: function (data) {
                        return data;
                    }
                }
                , function (result,_callback) {
                    var index_alert = layer.alert(result.msg, {title: '提示信息'}, function () {
                        layer.close(index_alert);
                        _callback();
                    })
                }) : '';
            return false;
        });

        //监听删除操作
        form.on('submit(delete)', function (data) {
            if (!rowCache || rowCache == null) {
                layer.msg("请选择需要删除的短链信息");
                return false;
            }
            $.ajax({ url: basePath + '/links/delete',  data: {"linkId": rowCache.id}, type: 'POST',
                success: function (result) {
                    var index_alert = layer.alert(result.msg, {title: '提示信息'}, function () {
                        layer.close(index_alert);
                        location.reload();
                    })
                }
            })
        });
    });
</script>

</body>
</html>